<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染</title>
</head>
<body>
  <div id='demo'>
    <p>a.b:{{a.b}}</p>
    <p>a.c:{{a.c}}</p>
    <button @click='update'>更新</button>
     <button @click='del'> 删除</button>
  </div>
  <script src=../js/vue.js></script>
  <script>
    const vm = new Vue({
      el:"#demo",
      data:{
        a:{
          b:123
        }
      },
      methods:{
        update(){
          if(!this.a.hasOwnProperty('c')){
              //Vue.set(this.a,'c','abc')
              this.$set(this.a,'c','abc')
          }else{
              this.a.c = this.a.c+'--'
          }
          //直接删除响应式对象的属性==》界面不会更新
        //  delete this.a.b
          // this.$delete(this.a,'b')
          // Vue.delete(this.a,'b');
        },
        del(){
         // delete this.a.b
          this.$delete(this.a,'b');
       }
      }
    })
  </script>
</body>
</html>